import { View, Image, Text } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { Component } from 'react';
import './index.less';
import actions from '../../actions/index';
import { connect } from 'react-redux';
import { store2Props } from '../../selectors';
import * as T from '../../types';
import 'taro-ui/dist/style/components/modal.scss';
import { IPLAND_OSS_HOST } from '../../../constant';

interface INaviProps {
  isOpened: boolean;
  onCancel: Function;
}

type IToolsBoxProps = T.IProps & INaviProps;

//@ts-ignore
@connect<Partial<IToolsBoxProps>, T.IToolsBoxState>(store2Props, actions)
export default class NaviModal extends Component<Partial<IToolsBoxProps>, any> {
  // export default class NaviModal extends Component<INaviProps, any> {
  // constructor(props: IToolsBoxProps) {
  //   super(props);
  // }
  constructor(props) {
    super(props);
    this.state = {
      showCoin: true,
      showManghe: false,
      showMolishang: false,
      showZhuawawa: false,
      showChouka: false,
      showGuaguale: false,
    };
  }

  showManghe = () => {
    this.setState({
      showCoin: false,
      showManghe: true,
      showMolishang: false,
      showZhuawawa: false,
      showChouka: false,
      showGuaguale: false,
    });
  };

  showMolishang = () => {
    this.setState({
      showCoin: false,
      showManghe: false,
      showMolishang: true,
      showZhuawawa: false,
      showChouka: false,
      showGuaguale: false,
    });
  };

  showZhuawawa = () => {
    this.setState({
      showCoin: false,
      showManghe: false,
      showMolishang: false,
      showZhuawawa: true,
      showChouka: false,
      showGuaguale: false,
    });
  };

  showChouka = () => {
    this.setState({
      showCoin: false,
      showManghe: false,
      showMolishang: false,
      showZhuawawa: false,
      showChouka: true,
      showGuaguale: false,
    });
  };

  showGuaguale = () => {
    this.setState({
      showCoin: false,
      showManghe: false,
      showMolishang: false,
      showZhuawawa: false,
      showChouka: false,
      showGuaguale: true,
    });
  };

  reset = () => {
    this.setState({
      showCoin: true,
      showManghe: false,
      showMolishang: false,
      showZhuawawa: false,
      showChouka: false,
      showGuaguale: false,
    });
  }

  gotoGame(gameType, gamePath) {
    // 查询活动是否结束
    let result = this.props.actions.action.getGameBaseConfig(gameType);
    result.then((res) => {
      if (res.context) {
        Taro.navigateTo({ url: gamePath });
      } else {
        Taro.showToast({
          title: '活动已结束~',
          icon: 'none',
        });
      }
    });
  }

  render() {
    let { isOpened } = this.props;
    let {
      main: {
        onlyShowCoinRain,
        coinRainNavigationText,
        choumangheNavigationText,
        molishangNavigationText,
        zhuawawaNavigationText,
        chouchoukaNavigationText,
        scratchNavigationText
      },
      actions,
    } = this.props;
    let {
      showCoin,
      showManghe,
      showMolishang,
      showZhuawawa,
      showChouka,
      showGuaguale
    } = this.state;

    return isOpened ? (
      <View className="naviContainer">
        {showCoin && (
          <View className="jingbiyu">
            <Image className="coinImg" src={`${IPLAND_OSS_HOST}home/jingbiyu.png`} />
            <Image className="arrow" src={`${IPLAND_OSS_HOST}home/arrow1.png`} />
            <View className="desc">
              <Text className="title">魔力金币雨</Text>
              <Text className="subtitle">{coinRainNavigationText || '倾盆而下，财富无限，惊喜连连！'}</Text>
              {onlyShowCoinRain ? (
                <View className="steps" style={{ justifyContent: 'center' }}>
                  <Text
                    className="next"
                    style={{ width: '144rpx' }}
                    onClick={() => {
                      this.props.onCancel();
                      this.reset();
                      this.gotoGame(0, '/pages/package-I/goldCoinsIndex/index');
                    }}
                  >
                    进入游戏
                  </Text>
                </View>
              ) : (
                <View className="steps">
                  <Text className="jump"
                    onClick={() => {
                      this.props.onCancel()
                      this.reset();
                    }}>
                    跳过指导
                  </Text>
                  <Text className="next" onClick={() => this.showManghe()}>
                    下一步
                  </Text>
                </View>
              )}
            </View>
          </View>
        )}
        {showManghe && (
          <View className="manghe">
            <Image className="mangheImg" src={`${IPLAND_OSS_HOST}home/manghe.png`} />
            <Image className="arrow" src={`${IPLAND_OSS_HOST}home/arrow2.png`} />
            <View className="desc">
              <Text className="title">魔力抽盲盒</Text>
              <Text className="subtitle">{choumangheNavigationText || '在一无所知的日子里抽个有趣的盲盒吧'}</Text>
              <View className="steps">
                <Text className="jump"
                  onClick={() => {
                    this.props.onCancel()
                    this.reset();
                  }}>
                  跳过指导
                </Text>
                <Text className="next" onClick={() => this.showMolishang()}>
                  下一步
                </Text>
              </View>
            </View>
          </View>
        )}
        {showMolishang && (
          <View className="molishang">
            <Image className="molishangImg" src={`${IPLAND_OSS_HOST}home/molishang.png`} />
            <Image src={`${IPLAND_OSS_HOST}home/arrow1.png`} className="arrow"></Image>
            <View className="desc">
              <Text className="title">魔力赏</Text>
              <Text className="subtitle">{molishangNavigationText || '惊喜无限，奖品连连，尽享抽奖乐趣'}</Text>
              <View className="steps">
                <Text className="jump"
                  onClick={() => {
                    this.props.onCancel()
                    this.reset();
                  }}>
                  跳过指导
                </Text>
                <Text className="next" onClick={() => this.showZhuawawa()}>
                  下一步
                </Text>
              </View>
            </View>
          </View>
        )}
        {showZhuawawa && (
          <View className="wawa">
            <Image src={`${IPLAND_OSS_HOST}home/wawa.png`} className="wawaImg"></Image>
            <Image src={`${IPLAND_OSS_HOST}home/arrow2.png`} className="arrow"></Image>
            <View className="desc">
              <Text className="title">魔力抓娃娃</Text>
              <Text className="subtitle">{zhuawawaNavigationText || '这个世界就像娃娃机 而我透过玻璃只想得到'}</Text>
              <View className="steps">
                <Text className="jump"
                  onClick={() => {
                    this.props.onCancel()
                    this.reset();
                  }}>
                  跳过指导
                </Text>
                <Text className="next" onClick={() => this.showChouka()}>
                  下一步
                </Text>
              </View>
            </View>
          </View>
        )}
        {showChouka && (
          <View className="chouka">
            <View className="left">
              <Image src={`${IPLAND_OSS_HOST}home/arrow3.png`} className="arrow"></Image>
              <Image src={`${IPLAND_OSS_HOST}home/chouka.png`} className="choukaImg"></Image>
            </View>
            <View className="desc">
              <Text className="title">魔力抽抽卡</Text>
              <Text className="subtitle">{chouchoukaNavigationText || '究竟有什么样的魔力 让我忍俊不禁'}</Text>
              <View className="steps">
                <Text className="jump"
                  onClick={() => {
                    this.props.onCancel()
                    this.reset();
                  }}>
                  跳过指导
                </Text>
                <Text className="next" onClick={() => this.showGuaguale()}>
                  下一步
                </Text>
              </View>
            </View>
          </View>
        )}
        {showGuaguale && (
          <View className="guaguale">
            <View className="left">
              <Image src={`${IPLAND_OSS_HOST}home/arrow3.png`} className="arrow"></Image>
              <Image src={`${IPLAND_OSS_HOST}home/guaguale.png`} className="guagualeImg"></Image>
            </View>
            <View className="desc">
              <Text className="title">刮刮乐</Text>
              <Text className="subtitle">{scratchNavigationText || '一刮即中，乐享不停，惊喜无限！'}</Text>
              <Text className="gotIt"
                onClick={() => {
                  this.props.onCancel()
                  this.reset();
                }}>
                知道了
              </Text>
            </View>
          </View>
        )}
      </View>
    ) : null;
  }
}

//create by moon https://github.com/creasy2010/moon
